<template>
  <div>
    <div class="tip" v-show="isShowTip" @mousedown.stop="down($event)" @mouseup.stop="up()">
      <div class="title">
        <div class="add" title="新建笔记"><i class="el-icon-plus"></i></div>
        <div class="right-more">
          <div class="more"><i class="el-icon-more"></i></div>
          <div class="close" @click="closeTip()"><i class="el-icon-close"></i></div>
        </div>
      </div>

      <div class="content">
        <textarea cols="30" rows="16" placeholder="请输入..." v-model="content"></textarea>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState, mapMutations } from 'vuex'

export default {
  name: 'newTip',

  data () {
    return {
      tip: null,
      content: '',
      timeStr: '',
      isShowContent: false
    }
  },

  computed: {
    ...mapState(['isShowTip', 'originText'])
  },

  watch: {
    originText () {
      this.content = this.originText
      this.isShowContent = true
    }
  },

  methods: {
    ...mapMutations(['changeShowTip', 'getInfo', 'changeTipContent']),

    closeTip () {
      this.changeShowTip(false)
      if (this.isShowContent || this.content === '') {
        if (this.isShowContent) {
          this.isShowContent = false
          this.changeTipContent(this.content)
        }
        return
      }
      const time = new Date()
      // 月
      const month = time.getMonth() + 1
      // 日
      const day = time.getDate()
      // 几点
      const h = time.getHours()
      // 多少分钟
      const m = time.getMinutes()
      this.timeStr = month + '月' + day + '号' + h + ':' + m
      this.getInfo({ text: this.content, time: this.timeStr, showTime: false }, this.isShowContent)
      this.isShowContent = false
      this.content = ''
    },

    down (ev) {
      this.tip = document.querySelector('.tip')
      // 获取鼠标按下的坐标
      const x1 = ev.clientX
      const y1 = ev.clientY
      // 获取元素的left，top值
      const l = this.tip.offsetLeft
      const t = this.tip.offsetTop
      // 给可视区域添加鼠标的移动事件
      this.tip.onmousemove = event => {
        // 获取鼠标移动时的坐标
        const x2 = event.clientX
        const y2 = event.clientY
        // 计算出鼠标的移动距离
        const x = x2 - x1
        const y = y2 - y1
        // 移动的数值与元素的left，top相加，得出元素的移动的距离
        const lt = y + t
        const ls = x + l
        // 更改元素的left，top值
        this.tip.style.top = lt + 'px'
        this.tip.style.left = ls + 'px'
      }
    },

    up () {
      this.tip.onmousemove = null
      this.tip.onmousedown = null
    }

  }
}
</script>

<style lang="less" scoped>
.tip {
  width: 320px;
  height: 300px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  background-color: rgb(51, 51, 51);
}

.title {
  height: 30px;
  display: flex;
  justify-content: space-between;
  background-color: rgb(170, 170, 170);
}

.add,
.more,
.close {
  height: 30px;
  width: 30px;
}

.add:hover,
.more:hover,
.close:hover {
  background-color: rgb(151, 151, 151);
}

.right-more {
  display: flex;
}

.content {
  width: 100%;
  height: 100%;

  textarea {
    width: 100%;
    padding: 10px;
    outline: none;
    resize: none;
    background-color: rgb(51, 51, 51);
    color: rgb(238, 238, 238);
  }
}
</style>
